<!--
 *@开发者: 刘翔
 *@创建时间: 2024-04-24 14:49:04
 *@描述: 页面标题组件
!-->
<template>
  <div class="page-tile">
    <div class="page-tile-top">
      <div class="page-tile-top-1"></div>
      <div class="page-tile-top-2">{{ pageTile }}</div>
      <div class="page-tile-top-3">{{ pageTileDate }}</div>
      <div class="page-tile-top-4" @click="handleEdit" v-if="editSwitch">编辑</div>
    </div>
    <div class="page-tile-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'pageTile',
  // 组件参数 接收来自父组件的数据
  props: {
    pageTile: {
      type: String,
      default: '',
    },
    pageTileDate: {
      type: String,
      default: '',
    },
    editSwitch: {
      type: Boolean,
      default: false,
    },
  },
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 点击编辑按钮
    handleEdit() {
      this.$emit('editDialogClick');
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.page-tile {
  position: relative;
  .page-tile-top {
    padding-left: 1%;
    display: flex;
    align-items: center;
    height: 108px;
    .page-tile-top-1 {
      margin-right: 1%;
      width: 20px;
      height: 70%;
      background: #4874cb;
    }
    .page-tile-top-2 {
      margin-right: 1%;
      color: #4874cb;
      font-size: 3rem;
      font-weight: 600;
    }
    .page-tile-top-3 {
      font-size: 3rem;
      font-weight: 600;
    }
    .page-tile-top-4 {
      margin-left: auto;
      cursor: pointer;
      padding: 8px 16px;
      color: #4874cb;
      border: 1px solid #4874cb;
      border-radius: 4px;

      &:hover {
        background-color: rgba(72, 116, 203, 0.1);
      }
    }
  }
  .page-tile-content {
    padding: 2%;
    height: calc(1080px - 108px);
    box-sizing: border-box;
  }
}
</style>
